<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="utf-8">
    <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}" media="all">
    <script th:src="@{/echarts/jquery-1.11.1.min.js}"></script>
    <script th:src="@{/layui/layui.js}" charset="utf-8"></script>
    <style>
        body {
            margin: 10px;
        }
    </style>
</head>
<body class="childrenBody">
<!--模态窗-->
<div id="addOrUpdateDiv" style="padding:25px 0px;border: 4px solid skyblue;">
    <form action="" method="post" id="searchFrm2" lay-filter="searchFrm2" class="layui-form">
        <input type="hidden" name="id">
        <div class="layui-form-item">
            <label class="layui-form-label">姓名</label>
            <div class="layui-input-inline">
                <input type="text" name="username" required lay-verify="required" placeholder="请输入姓名"
                       autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">性别</label>
            <div class="layui-input-inline">
                <input type="radio" name="sex" value="男" title="男">
                <input type="radio" name="sex" value="女" title="女" checked>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">年龄</label>
            <div class="layui-input-inline">
                <input type="text" name="age" required lay-verify="required" placeholder="请输入年龄" autocomplete="off"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">手机号</label>
            <div class="layui-input-inline">
                <input type="text" name="phone" required lay-verify="required" placeholder="请输入手机号" autocomplete="off"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">报告时间</label>
            <div class="layui-input-inline">
                <input type="text" name="createTime" class="layui-input" id="test1" placeholder="yyyy-MM-dd HH:mm:SS">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">早上体温</label>
            <div class="layui-input-inline">
                <input type="text" name="morningTemp" required lay-verify="required" placeholder="仅输入体温数值"
                       autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">中午体温</label>
            <div class="layui-input-inline">
                <input type="text" name="afternoonTemp" required lay-verify="required" placeholder="仅输入体温数值"
                       autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">晚上体温</label>
            <div class="layui-input-inline">
                <input type="text" name="nightTemp" required lay-verify="required" placeholder="仅输入体温数值"
                       autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">发烧咳嗽</label>
            <div class="layui-input-inline">
                <input type="text" name="feverAndCough" required lay-verify="required" placeholder="请输入身体状态"
                       autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">近期居住地</label>
            <div class="layui-input-inline">
                <input type="text" id="city" name="recentHome" disabled="disabled" required lay-verify="required" placeholder="定位信息"
                       autocomplete="off" class="layui-input" style="border: 0px" >
            </div>
<!--            <div class="layui-input-inline">-->
<!--                <span id="city" name="recentHome"></span>-->
<!--            </div>-->
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">风险地区</label>
            <div class="layui-input-inline">
                <input type="radio" name="riskZone" value="低风险区" title="低风险区">
                <input type="radio" name="riskZone" value="高风险区" title="高风险区" checked>
            </div>
        </div>

        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">近期接触史</label>
            <div class="layui-input-inline">
                <textarea name="recentZone" placeholder="请输入近期接触史:如广州市XX大厦XX室" class="layui-textarea"></textarea>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">健康状况</label>
            <div class="layui-input-inline">
                <input type="radio" name="healthStatus" value="健康" title="健康">
                <input type="radio" name="healthStatus" value="不健康" title="不健康" checked>
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="doAdd">提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>

    </form>
</div>

<script>
    layui.config({
        version: '1632428048355' //为了更新 js 缓存，可忽略
    });

    var tableIns;
    var mainIndex;

    //加载模块
    layui.use(['jquery','laydate'], function () {
        var layer = layui.layer //弹层
            , $ = layui.jquery
            , table = layui.table //表格
            , element = layui.element //元素操作
            , form = layui.form
            , laydate = layui.laydate;

        laydate.render({
            elem: '#test1',
            type: 'datetime'
        })

        //监听Tab切换
        element.on('tab(demo)', function (data) {
            layer.tips('切换了 ' + data.index + '：' + this.innerHTML, this, {
                tips: 1
            });
        });

        //执行一个 table 实例
        tableIns = table.render({
            elem: '#demo'
            , height: 450
            , width: 1100
            , url: '/listHealthClock' //数据接口
            , title: '用户表'
            , page: true //开启分页
            , toolbar: 'default' //开启工具栏，此处显示默认图标，可以自定义模板，详见文档
            , totalRow: true //开启合计行
            , cols: [ [ //表头
                {type: 'checkbox', fixed: 'left'}
                , {field: 'id', title: 'ID', width: 50, fixed: 'left'}
                , {field: 'username', title: '姓名', width: 80}
                // , {field: 'sex', title: '性别', width: 60}
                // , {field: 'age', title: '年龄', width: 60}
                // , {field: 'phone', title: '手机号', width: 120}
                , {field: 'createTime', title: '打卡时间', width: '150'
                    , templet: "<div>{{layui.util.toDateString(d.createTime, 'yyyy-MM-dd HH:mm:ss')}}</div>"}
                , {field: 'morningTemp', title: '早上体温', width: 90}
                , {field: 'afternoonTemp', title: '中午体温', width: 90}
                , {field: 'nightTemp', title: '晚上体温', width: 90}
                , {field: 'feverAndCough', title: '发烧咳嗽', width: 90}
                , {field: 'recentHome', title: '近期居住地', width: 100}
                , {
                    field: 'riskZone', title: '风险地区', width: 90, templet: function (d) {
                        return d.riskZone == '高风险' ? '<span class="layui-badge layui-bg-red">高风险</span>' : '<span class="layui-badge layui-bg-green">低风险</span>';
                    }
                }
                , {field: 'recentZone', title: '近期接触地', width: 100}
                , {
                    field: 'healthStatus', title: '健康状况', width: 90, fixed: 'right', templet:
                        function (data) {
                            if (data.healthStatus == '健康') {
                                return '<span class=\"layui-badge layui-bg-blue\">健康</span>'
                            } else {
                                return '<span class=\"layui-badge layui-bg-orange\">不健康</span>'
                            }
                        }
                }
                , {fixed: 'right', width: 200, align: 'center', toolbar: '#barDemo'}
            ] ]
        });

        //监听头工具栏事件 新增 修改和删除
        table.on('toolbar(test)', function (obj) {
            var data = obj.data; //获取选中的数据
            switch (obj.event) {
                case 'add':
                    // 调出弹窗
                    openAddLayer();
                    break;
                case 'update':
                    // 调出弹窗,加载一次数据  1.回显数据
                    openAddLayer(data);
                    break;
                case 'delete':
                    if (data.length === 0) {
                        layer.msg('请选择一行');
                    } else {
                        layer.msg('删除');
                    }
                    break;
            }
            ;
        });

        //删除和编辑  监听行工具事件
        table.on('tool(test)', function (obj) {
            var data = obj.data //获得当前行数据
                , layEvent = obj.event;
            if (layEvent === 'update') {
                // 更新的逻辑代码
                openAddLayer(data);
            } else if (layEvent === 'delete') {
                layer.confirm('真的删除行么', function (index) {
                    obj.del(); //删除对应行（tr）的DOM结构
                    //向服务端发送删除指令
                    $.post("/deleteHealthClockById", {id: obj.data.id}, function (res) {
                        if (res.code == 200) {
                            tableIns.reload({
                                where: "",
                            });
                        }
                        layer.msg(res.msg);
                    })
                    layer.close(index);
                });

            }
        });

        // 模糊查询
        form.on("submit(doSearch)", function (data) {
            tableIns.reload({
                where: data.field,
                page: {
                    curr: 1
                }
            });
            return false;
        })

        // 新增或者数据请求
        form.on("submit(doAdd)", function (data) {
            $.post("/addHealthClock", data.field, function (res) {
                if (res.code == 200) {
                    tableIns.reload();
                }
                layer.msg(res.msg);
                layer.close(mainIndex);
            });

            return false;
        });


        // 模态窗//页面层
        function openAddLayer(data) {
            mainIndex = layer.open({
                type: 1,
                skin: 'layui-layer-rim', //加上边框
                content: $("#addOrUpdateDiv"),
                area: ['500px', '600px'],
                success: function () {
                    $("#searchFrm2")[0].reset();
                    form.val("searchFrm2", data);
                }
            });
        }

    });
</script>

<!-- 定位信息JS：recentHome -->
<script>
    $(document).ready(function() {
        $.get("/getCity", function(data) {
            // $("#city").text(data);
            $("#city").val(data);
        });
    });
</script>

</body>
</html>
